var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {

    $scope.colors = ['red', 'orange', 'green'];

    $scope.change = function() {
        return $scope.colors[Math.floor((Math.random() * 3))];
    }

});

app.directive('helloWorld', function() {
    return {
        scope: {
            color: '=',
            changeColor: '&',
        },
        restrict: 'AE',
        replace: true,
        template: '<p style="background-color:{{color}}">Hello World</p>',
        controller: function($scope) {
            console.log('---->', $scope);
            var at = $scope.changeColor();
            console.log('---->', at);
        },
        link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                scope.$apply(function() {
                    scope.color = "white";
                });
            });
            elem.bind('mouseover', function() {
                elem.css('cursor', 'pointer');
                scope.$apply(function() {
                    scope.color = scope.changeColor();
                });
            });
            scope.$watch('color', function(changedVal) {
                console.log('changed detected');
            });
        }
    }

});
